Custom-built QR Code Modal

Disabling the default QR Modal

The cylindo-viewer web component comes with a built-in QR code modal enabled by default. However, if you wish to use a custom modal, the built-in modal can be disabled.

To disable the built-in modal, add the qr-modal-disabled attribute to the cylindo-viewer tag, as shown below:

<cylindo-viewer customer-id="5098" code="ARMCHAIR-PDP" qr-modal-disabled />

Listening for the QR Event

The cylindo-viewer emits a custom event called qr-code when the QR code needs to be displayed. To capture this event:

const viewer = document.querySelector("cylindo-viewer");

viewer.addEventListener("qr-code", event => {
  const qrCodeUrl = event.detail.imageUrl;
});

Displaying the QR Code

Use the obtained imageUrl from the event's details to display the QR code within your custom modal, as illustrated in the example below:

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Loading...

Live Editor

function Example() {
  const viewer = React.useRef(null);
  const [qrImageUrl, setQrImageUrl] = React.useState();

  const eventListener = event => setQrImageUrl(event.detail.imageUrl);

  useEffect(() => {
    if (viewer.current) {
      viewer.current.addEventListener("qr-code", eventListener);
    }
    return () => {
      if (viewer.current) {
        viewer.current.removeEventListener("qr-code", eventListener);
      }
    };
  }, []);

  return (
    <>
      {qrImageUrl && (
        <div
          style={{
            width: 200,
            backgroundColor: "white",
            position: "absolute",
            zIndex: 1,
          }}
        >
          <p>Custom-built Modal</p>
          <button onClick={() => setQrImageUrl("")}>Close</button>
          <img src={qrImageUrl} alt="Custom QR Code" />
        </div>
      )}
      <cylindo-viewer
        ref={viewer}
        customer-id="5098"
        code="WHISTLER SOFA BED"
        remote-config="k2hctc08"
        qr-modal-disabled
      />
    </>
  );
}